<template>
  <div class="wrap">
    <el-tabs v-model="activePanel" type="card" @tab-click="handleClick" class='tabPanel'>
      <el-tab-pane label="待处理预约" name="pending">
        <div class="app-button-container">
          <el-button type="primary">
            <router-link to='/appointmentConfirm/registerAppointment'>
              预约登记
            </router-link>
          </el-button>
        </div>

        <div class="filter-container">
          <div class='filterBox'>
            <div class='leftPart filterPart'>
              <el-checkbox class="filter-item" style="margin-left:15px;" @change="todayAppointment"
                           v-model="filter.todayFlag">今日预约
              </el-checkbox>
            </div>
            <div class='rightPart filterPart'>

              <el-select clearable style="width: 120px" class="filter-item" v-model="filter.type">
                <el-option label="患者姓名" value="0"></el-option>
                <el-option label="手机号后四位" value="1"></el-option>
                <el-option label="就诊卡号" value="2"></el-option>
              </el-select>
              <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter.keyWord">
              </el-input>
              <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索
              </el-button>

            </div>
          </div>
        </div>
        <complex-table
          :columnsType='"index"'
          :list='tableList1'
          :totalList='totalList1'
          :theadList="appointmentConfirmConst.theadList1"
          :operationButtons='appointmentConfirmConst.operationButtons1'
          @initListQuery = 'initListQuery'
          @getSelectArr='getSelectArr'
          @getListByPagination='getTableList1'
          @operationEvent0='operationEvent1_0'
          @operationEvent1='operationEvent1_1'
          @operationEvent2='operationEvent1_2'>
        </complex-table>
      </el-tab-pane>

      <el-tab-pane label="历史预约" name="done">
        <div class="filter-container">
          <div class='filterBox'>
            <div class='leftPart filterPart'></div>
            <div class='rightPart filterPart'>
              <el-select clearable style="width: 120px" class="filter-item" v-model="filter2.type">
                <el-option label="患者姓名" value="0"></el-option>
                <el-option label="手机号后四位" value="1"></el-option>
                <el-option label="就诊卡号" value="2"></el-option>
              </el-select>
              <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter2.keyWord">
              </el-input>
              <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter2">搜索
              </el-button>
            </div>
          </div>
        </div>
        <complex-table
          :columnsType='"index"'
          :list='tableList2'
          :totalList='totalList2'
          :theadList="appointmentConfirmConst.theadList2"
          :statusArr='appointmentConfirmConst.statusArr'
          :operationButtons='appointmentConfirmConst.operationButtons2'
          @initListQuery = 'initListQuery'
          @getListByPagination='getTableList2'
          @operationEvent0='operationEvent2_0'>
        </complex-table>
      </el-tab-pane>

      <el-dialog title="退出日间" :visible.sync="dialogLeftTop1_2" class='dialogLeftTop1_2'>
        <el-form ref="formLeftTop2" :model="formLeftTop2" label-width="80px">
          <el-form-item label="类型">
            <dict-select v-model="formLeftTop2.typeId" placeholder="请选择取消类型" dict-code="exit_doms_type">
            </dict-select>
          </el-form-item>
          <el-form-item label="取消原因">
            <dict-select v-model="formLeftTop2.reasonId" placeholder="请选择取消原因" dict-code="exit_doms_reason" parent-code="exit_doms_type" :parent-value="formLeftTop2.typeId">
            </dict-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="formLeftTop2.memo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogLeftTop1_2 = false">取 消</el-button>
          <el-button type="primary" @click="cancelAppoint">确 定</el-button>

        </div>
      </el-dialog>

      <el-dialog title="预约确认" :visible.sync="dialogLeftTop1_3" class='dialogLeftTop1_3' width='90%'>

      </el-dialog>

    </el-tabs>
  </div>
</template>
<script>
  import complexTable from '@/views/table/complexTable'
  import waves from '@/directive/waves/index.js'
  import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
  import { pageList, getDoctorList, getSurgeryList, cancel } from '@/api/appointmentManage/appointmentConfirm'
  import DictSelect from '@/views/form/dictSelect'

  export default {
    components: { DictSelect, complexTable },
    data() {
      return {
        appointmentConfirmConst,
        filter: {
          keyWord: '',
          type: '0',
          todayFlag: true,
          page: 1,
          limit: 5
        },
        filter2: {
          keyWord: '',
          type: '0',
          page: 1,
          limit: 5
        },
        activePanel: 'pending',
        dialogLeftTop1_1: false,
        dialogLeftTop1_2: false,
        dialogLeftTop1_3: false,
        formLeftTop2: {
          typeId: '',
          reasonId: '',
          memo: '',
          appointId: 0
        },
        formLabelWidth: '120px',
        filterContainer: {},
        tableList1: [],
        tableList2: [],
        selectArr: [],
        totalList1: 0,
        totalList2: 0
      }
    },
    mounted() {
      this.getTableList1(this.filter)
      this.getTableList2(this.filter2)
      // this.getDoctorList()
    },
    methods: {
      initListQuery(listQuery) {
        this.filter.limit = listQuery.limit
        this.filter.page = listQuery.page
        this.filter2.limit = listQuery.limit
        this.filter2.page = listQuery.page
      },
      operationEvent1_0(row) {
        this.dialogLeftTop1_3 = !this.dialogLeftTop1_3
        this.dialogLeftTop1_3_data = Object.assign({}, this.dialogLeftTop1_3_data, row)
      },
      operationEvent1_1(row) {
        this.formLeftTop2.appointId = row.appointmentId
        this.dialogLeftTop1_2 = true
      },
      operationEvent1_2(row) {
      },
      operationEvent2_0(row) {
        this.$router.push('/appointmentConfirm/registerAppointment?id=' + row.id)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              message: '恭喜你，预约成功！',
              type: 'success',
              duration: 2000
            })
            this.$refs[formName].resetFields()
            this.dialogLeftTop1_1 = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getDoctorList() {
        getDoctorList().then((res) => {
          this.dialogLeftTop1_1_data_doctorList = res.data.data
        })
      },
      getSurgeryList(doctor) {
        getSurgeryList({ doctor: doctor }).then((res) => {
          this.dialogLeftTop1_1_data_surgeryList = res.data.data
        })
      },
      handleFilter() {
        this.getTableList1(this.filter)
      },
      handleFilter2() {
        this.getTableList2(this.filter2)
      },
      todayAppointment() {
      },
      propagandaAndEducation() {
        if (!this.selectArr.length) {
          this.$message({
            message: '请先选择宣教对象！',
            type: 'warning'
          })
          return
        }
        this.dialogLeftTop1_2 = true
      },
      getSelectArr(selectArr) {
        this.selectArr = selectArr
      },
      handleClick(tab, event) {
      },
      getTableList1(listQuery) {
        this.filter.page = listQuery.page
        this.filter.limit = listQuery.limit
        pageList({
          condition: listQuery.type,
          status: 0,
          keyword: listQuery.keyWord,
          todayFlag: listQuery.todayFlag ? 1 : 0
        }, listQuery.page, listQuery.limit).then((res) => {
          for (const item of res.data.list) {
            item.id = item.appointmentId
          }
          this.tableList1 = res.data.list
          this.totalList1 = res.data.total
        })
      },
      getTableList2(listQuery) {
        this.filter2.page = listQuery.page
        this.filter2.limit = listQuery.limit
        pageList({
          condition: listQuery.type,
          status: 1,
          keyword: listQuery.keyWord
        }, listQuery.page, listQuery.limit).then((res) => {
          for (const item of res.data.list) {
            item.id = item.appointmentId
          }
          this.tableList2 = res.data.list
          this.totalList2 = res.data.total
        })
      },
      cancelAppoint() {
        cancel(this.formLeftTop2).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: '取消成功！',
              type: 'success',
              duration: 2000
            })
            this.dialogLeftTop1_2 = false
            if (this.tableList1.length === 1) {
              this.filter.page = (this.filter.page - 1 <= 0 ? 1 : this.filter.page - 1)
            }
            this.getTableList1(this.filter)
          } else {
            this.$message({
              message: '取消失败！',
              type: 'error',
              duration: 2000
            })
          }
        })
      }
    },
    directives: {
      waves
    }
  }
</script>
<style lang="scss">
  .wrap {
    .tabPanel {
      height: 100%;
      background-color: #fff;
      padding-top: 10px;
      overflow: auto;
      .el-tabs__header {
        padding-left: 20px;
      }
    }
    .filterBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .filterPart {
        line-height: 2;
      }
    }
    .dialogLeftTop1_1 {
      .el-dialog {
        overflow: auto;
      }
      .el-dialog__header {
        border-bottom: 1px solid #ddd;
      }
      .el-date-editor {
        width: 190px;
      }
    }
    .dialogLeftTop1_2 {
      .el-select {
        display: block;
      }
    }
    .dialogLeftTop1_3 {
      .box-card {
        background: #eee;
      }
      .el-dialog__header {
        border-bottom: 1px solid #ddd;
      }
      .el-dialog {
        height: 80%;
        margin-top: 10vh !important;
        overflow: auto;
      }
    }
  }
</style>
